<template>
  <div>
    <div>
      <el-row type="flex" class="row-bg" justify="center">
        <el-col :span="4"><div class="grid-content"></div></el-col>
        <el-col :span="4"><div class="grid-content"></div></el-col>
        <el-col :span="4"><div class="grid-content"></div></el-col>

        <el-col :span="4"
          ><div class="grid-content">
            <template>
              <el-select v-model="value" clearable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template></div
        ></el-col>
        <el-col :span="4"
          ><div class="grid-content">
            <el-input placeholder="任务名/任务内容" v-model="keyword" clearable>
            </el-input></div
        ></el-col>
        <el-col :span="4"
          ><div class="grid-content">
            <el-button type="primary" @click="search" icon="el-icon-search"
              >搜索</el-button
            >
          </div></el-col
        >
      </el-row>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="任务名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="任务 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="任务编号">
              <span>{{ props.row.taskNumber }}</span>
            </el-form-item>
            <el-form-item label="任务类型">
              <span>{{ props.row.taskType }}</span>
            </el-form-item>
            <el-form-item label="佣金">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <el-form-item label="发布时间">
              <span>{{ props.row.createTime }}</span>
            </el-form-item>
            <el-form-item label="任务描述">
              <span>{{ props.row.taskDescription }}</span>
            </el-form-item>

            <el-row type="flex" class="row-bg" justify="space-around">
              <el-col :span="6"
                ><div class="grid-content" align="right">
                  <el-button
                    @click="taskReview(props.row.id, true)"
                    type="success"
                    round
                    >通过</el-button
                  >
                </div></el-col
              >
              <el-col :span="6"
                ><div class="grid-content" align="left">
                  <el-button
                    @click="taskReview(props.row.id, false)"
                    type="danger"
                    round
                    >驳回</el-button
                  >
                </div></el-col
              >
            </el-row>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="任务 ID" prop="id"> </el-table-column>
      <el-table-column label="任务名称" prop="name"> </el-table-column>
      <el-table-column label="任务状态" prop="status" :formatter="statusFormat">
      </el-table-column>
      <el-table-column label="佣金" prop="price"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="onSale(scope.row)" type="text" size="small"
            >上架</el-button
          >
          <el-button @click="cancelSale(scope.row)" type="text" size="small"
            >下架</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- align="center" //让分页居中 -->
    <!--分页区域-->
    <el-pagination
      align="center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pageNum"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="queryInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<style>
.bg-purple-light {
  background: #e5e9f2;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 40px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: 1,
          label: "待审核",
        },
        {
          value: 2,
          label: "未通过审核",
        },
        {
          value: 3,
          label: "通过审核",
        },
        {
          value: 4,
          label: "已上架",
        },
        {
          value: 5,
          label: "已下架",
        },
      ],
      value: "",
      tableData: [
        {
          id: "",
          name: "",
          taskNumber: "",
          taskType: "",
          createTime: "",
          taskDescription: "",
          price: "",
          status: "",
        },
      ],
      //当前用户列表对象
      queryInfo: {
        pageNum: 1, //当前页数
        pageSize: 10, //当前页有多少条数据
      },
      total: 100, //总页数
      keyword: "",
    };
  },
  methods: {
    // 审核方法
    taskReview(id, flag) {
      let param = {
        id: id,
        auditResult: flag,
      };

      if (!flag) {
        this.reviewFalse(param);
      } else {
        this.reviewTrue(param);
      }
    },

    reviewTrue(param) {
      this.$confirm("此操作将同意该任务的审核, 请仔细核对该任务是否合法, 现在是否继续?", "重要提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
          this.$http.taskReview(param).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "审核成功",
              });
              this.getTaskLsit();
            } else {
              this.$message({
                type: "error",
                code: res.data.code,
                message: res.data.message,
              });
            }
          });
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消审核"
          });
        });
    },

    // 驳回审核弹出框
    reviewFalse(param) {
      this.$prompt("请输入驳回理由", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: "",
        inputErrorMessage: "理由格式不正确",
      })
        .then(({ value }) => {
          this.$message({
            type: "success",
            message: "你驳回的理由是: " + value,
          });

          param.auditOpinion = value;

          this.$http.taskReview(param).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "驳回成功",
              });
              this.getTaskLsit();
            } else {
              this.$message({
                type: "error",
                code: res.data.code,
                message: res.data.message,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    // 搜索
    search() {
      this.getTaskLsit();
    },

    onSale(row) {
      this.$http.onSale({ id: row.id }).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: "上架成功",
          });
          this.getTaskLsit();
        } else {
          this.$message({
            type: "error",
            code: res.data.code,
            message: res.data.message,
          });
        }
      });
    },

    cancelSale(row) {
      this.$http.cancelSale({ id: row.id }).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: "下架成功",
          });
          this.getTaskLsit();
        } else {
          this.$message({
            type: "error",
            code: res.data.code,
            message: res.data.message,
          });
        }
      });
    },

    getTaskLsit() {
      let param = {
        pageNum: this.queryInfo.pageNum,
        pageSize: this.queryInfo.pageSize,
      };
      if (this.keyword) {
        param.keyword = this.keyword;
      }
      if (this.value) {
        param.status = this.value;
      }

      this.$http.getTaskLsit(param).then((res) => {
        if (res.data.code != 200) {
          return this.$message.error("获取用户信息失败");
        }

        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
        this.queryInfo = res.data.data;
      });
    },
    //监听pagesize改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      //重新发送数据请求
      this.getTaskLsit();
    },
    handleCurrentChange(newPage) {
      //console.log(newPage);
      this.queryInfo.pageNum = newPage;
      //重新发送数据请求
      this.getTaskLsit();
    },

    //转义
    statusFormat(date) {
      if (date.status == 1) {
        return "待审核";
      }
      if (date.status == 2) {
        return "未通过审核";
      }
      if (date.status == 3) {
        return "通过审核";
      }
      if (date.status == 4) {
        return "已上架";
      }
      if (date.status == 5) {
        return "已下架";
      }
    },
  },

  created() {
    this.getTaskLsit();
  },
};
</script>